<template>
  <div class="root">
    <!-- 飞渡视频流窗口 绝对定位置于所有元素底层 占满屏幕 -->
    <div id="player"></div>
    <!-- 原型UI部分 -->
    <div class="screen-container">
      <header class="screen-header">
        <div class="title">乡村治理数字化管理平台</div>
        <div class="nav-container">
          <search></search>
        </div>
        <div class="setting">
          <img src="../../public/static/img/定位.png" alt="" />
          安溪县XX村
        </div>
      </header>
      <div class="screen-body">
        <section class="screen-left">
          <div id="left-top">
            <village-general></village-general>
          </div>
          <div id="left-middle">
            <village-manage></village-manage>
          </div>
          <div id="left-bottom">
            <village-environment></village-environment>
          </div>
        </section>
        <section class="screen-right">
          <div id="right-top">
            <village-govern></village-govern>
          </div>
          <div id="right-bottom">
            <village-travel></village-travel>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
// import right from "@/components/right";
import Search from "../components/search.vue";
import VillageGeneral from "../components/VillageGeneral";
import VillageManage from "../components/VillageManage";
import VillageEnvironment from "@/components/VillageEnvironment";
import VillageGovern from "@/components/VillageGovern";
import VillageTravel from "@/components/VillageTravel";
export default {
  data() {
    return {
      //飞渡相关
      id: 0,
      coords: [],
      startFlag: false,
      isedit: false,
      editpoiarr: [],
      editpoiindex: 0,
    };
  },
  created() {
    window.addEventListener("load", this.onLoad, true);
  },
  methods: {
    onLoad() {
      this.init(true, true);
    },

    init(withPlayer, withInterface) {
      let _this = this;
      this.getMatchServerConfig(HostConfig.MatchServer, function (o) {
        if (o.result == 0) {
          if (withPlayer) {
            new AirCityPlayer(o.instanceId, "player", HostConfig.Token, true);
          }
          if (withInterface) {
            var ace = new AirCityAPI(o.instanceId, _this.onReady, _this.log);
            // ace.setEventCallback(_this.onEvent);
          }
        } else {
          if (withPlayer) {
            let host = HostConfig.instanceId
              ? HostConfig.instanceId
              : HostConfig.AirCityPlayer;
            let acp = new AirCityPlayer(
              host,
              "player",
              HostConfig.Token,
              true,
              true
            );
            //AirCityPlayer对象增加方法enableAutoAdjustResolution，可以设置启用或关闭视频窗口缩放时
            //自动调整分辨率的功能。这个功能默认是启用的，如果想关闭此功能，可以在初始化的时候调用enableAutoAdjustResolution(false)
            acp.enableAutoAdjustResolution(false);
          }
          if (withInterface) {
            let host = HostConfig.instanceId
              ? HostConfig.instanceId
              : HostConfig.AirCityAPI;
            var ace = new AirCityAPI(host, _this.onReady, _this.log);
            ace.useColorLog = true;
            // __g.setEventCallback(_this.onEvent);
          }
        }
      });
    },

    getMatchServerConfig(host, fn, callbackIndex) {
      if ("WebSocket" in window) {
        var url = `ws://${host}`;
        let __fn = fn;

        var ws = new WebSocket(url);
        ws.onopen = function () {
          this.send(
            JSON.stringify({
              command: 6,
              callbackIndex: callbackIndex,
            })
          );
        };
        ws.onmessage = function (event) {
          var o = JSON.parse(event.data);
          __fn(o);
        };
        ws.onclose = function () {};
        ws.onerror = function (event) {};
      } else {
        this.log("Not Support WebSocket!");
      }
    },
  },
  components: {
    // right,
    Search,
    VillageGeneral,
    VillageManage,
    VillageEnvironment,
    VillageGovern,
    VillageTravel,
  },
};
</script>
<style lang="less" scoped>
.root {
  width: 100%;
  height: 100%;
}
#player {
  z-index: 0;
  width: 100vw;
  position: absolute;
  // opacity: 0.9;
  // background-color: red;
}
.screen-container {
  z-index: 1;
  width: 100%;
  height: 100%;
  background-image: url("../../public/static/img/智慧乡村.jpg");
  background-size: 100% 100%;
  box-sizing: border-box;
}
.screen-header {
  position: relative;
  width: 100%;
  height: 9%;
  display: flex;
  background-color: rgba(75, 72, 72, 0.2);
  //border: 1px solid #bd2c00;
  align-items: center;

  .title {
    position: relative;
    margin-left: 20px;
    width: 30%;
    /*margin-left: 3%;*/
    font-size: 30px;
    /*font-style: oblique;*/
    color: #ffffff;
  }
  .nav-container {
    position: relative;
    width: 75%;
    display: flex;
    /*align-items: center;*/
  }
  .setting {
    position: absolute;
    right: 40px;
    display: flex;
    align-items: center;
    color: #ffffff;
  }
}
.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  .screen-left {
    height: 78%;
    width: 20%;
    margin-top: 2%;
    #left-top {
      height: 20%;
      position: relative;
      //border: 1px solid #bd2c00;
    }
    #left-middle {
      margin-top: 5px;
      height: 35%;
      position: relative;
      //border: 1px solid #bd2c00;
    }
    #left-bottom {
      margin-top: 5px;
      height: 40%;
      position: relative;
      //border: 1px solid #bd2c00;
    }
  }
  .screen-right {
    height: 78%;
    width: 20%;
    position: absolute;
    right: 1px;
    margin-top: 2%;
    // border: 1px solid #bd2c00;
    #right-top {
      height: 45%;
      // position: relative;
      // border: 1px solid #bd2c00;
    }
    #right-bottom {
      height: 50%;
      margin-top: 5px;
      // position: relative;
      // border: 1px solid #bd2c00;
    }
  }
}
</style>
